<template>
  <el-card class="custom-card">
    <!-- 卡片顶部区域 -->
    <div class="flex flex-col">

      <!-- 大标题 -->
      <h1 class="contact-title">
        微生物菌株鉴定与保藏服务
      </h1>

      <div class="custom-double-divider">
        <el-divider class="title-divider" />
      </div>

      <!-- 服务介绍内容 -->
      <div class="section">
        <div class="platform-content">
          <p class="content-paragraph">
            药用微生物资源创新与转化研究平台提供药用植物共生细菌分离鉴定与保藏服务，通过高通量分离技术，从目标药用植物的根际土壤、根内、叶片、果实、内生等部位分离细菌菌株，建立细菌库，并提供菌株的-80℃与液氮低温保藏服务。
          </p>
        </div>
      </div>

      <!-- 服务流程 -->
      <div class="service-section">
        <h2 class="section-title">一、服务流程</h2>
        <div class="process-content">
          <p class="process-text">
            委托单位填写"菌株鉴定与保藏登记表"→委托单位邮寄材料至本平台→本平台进行检测并向委托单位发送缴费通知→本平台出具鉴定/保藏报告
          </p>
        </div>
      </div>

      <!-- 服务类型 -->
      <div class="service-section">
        <h2 class="section-title">二、服务类型</h2>
        <div class="type-content">
          <p class="type-text">
             药用植物病原菌、药用真菌、药用植物共生细菌的分离、鉴定及保藏。
          </p>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="service-section">
        <h2 class="section-title">三、联系方式</h2>
        <div class="contact-content">
          <p class="contact-text">联系电话：18870822971 刘老师</p>
          <p class="contact-text">邮箱：liutianrui2022@itcmhi.ac.cn</p>
        </div>
      </div>

      <!-- 邮寄地址 -->
      <div class="service-section">
        <h2 class="section-title">四、邮寄地址</h2>
        <div class="address-content">
          <p class="address-text">单位名称：中国中医科学院中医药健康产业研究所</p>
          <p class="address-text">详细地址：江西省南昌市新建区新祺周管理处中医药科创城公共服务中心3号楼</p>
          <p class="address-text">邮政编码：330115</p>
          <p class="address-text">收货人：刘天睿</p>
          <p class="address-text">手机号：18870822971</p>
        </div>
      </div>

      <!-- 汇款方式 -->
      <div class="service-section">
        <h2 class="section-title">五、汇款方式</h2>
        <div class="payment-content">
          <p class="payment-text">银行汇款</p>
          <p class="payment-text">名称：中国中医科学院中医药健康产业研究所</p>
          <p class="payment-text">银行账号：1502007809000067701</p>
          <p class="payment-text">开户银行：中国工商银行股份有限公司江西赣江新区分行</p>
          <p class="payment-text payment-note">
            汇款时请注明开发票抬头信息。请于汇款操作完成后，邮件通知本平台（附有汇款单据），以便我们确认汇款信息。
          </p>
        </div>
      </div>

      <!-- 其他注意事项 -->
      <div class="service-section">
        <h2 class="section-title">六、其他注意事项</h2>
        <div class="notes-content">
          <ol class="notes-list">
            <li class="note-item">请务必仔细阅读、填写和提交"菌株鉴定与保藏登记表"，未填写申请表的样品本中心将不予受理。</li>
            <li class="note-item">样品邮寄：请标识送检样品名称或编号，并同《菌株鉴定与保藏登记表》中填写的信息一致，样品如为菌种，请提供5支以上纯新鲜培养物，并注意样品邮寄过程中的包装防护和温度防护。</li>
            <li class="note-item">送样要求：委托鉴定菌株应为非致病菌，且来源明确；若属于中华人民共和国卫生部制定的《人间传染的病原微生物名录》之内菌株，本单位有权停止试验或加收20%鉴定费用。</li>
            <li class="note-item">依据菌种的种类、鉴定难易程度，鉴定费用有所不同，具体事宜请来电或邮件咨询。</li>
            <li class="note-item">鉴定技术服务执行预付款制度，鉴定报告完成后将连同发票快递给客户。</li>
            <li class="note-item">鉴定流程：微生物菌种鉴定人接收微生物菌株，转接，登记编号，妥善（专用地点）保存。鉴定人在鉴定过程中，将菌株的特征文字描述、获得数据资料、图片等以数字文件形式存档（以数字形式个人存档，积累至中心存档）。菌株特征包括菌落形状、颜色、大小、生理生化反应、菌体、孢子囊、孢子直径或大小，菌体、菌丝、产孢机构的形态特征，以及基因序列信息特征等。</li>
            <li class="note-item">微生物菌种的鉴定结果以中心统一的鉴定报告格式给出菌株鉴定报告书。原始数据和图片以附件形式列于鉴定报告之后。菌种鉴定的数据文件和数字文档两种形式记录存档。本中心原则上提供一份中文鉴定报告纸质原件，如客户要求增加出具英文鉴定报告请提前告知。</li>
            <li class="note-item">鉴定完成后所用的菌种，按菌株送样人的意见进行返还、销毁或由本单位保藏。</li>
          </ol>
        </div>
      </div>

    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
</script>

<style scoped>
/* 自定义卡片样式 */
.custom-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
  max-width: 900px;
  margin: 0 auto;
}

.custom-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 标题样式 */
.contact-title {
  font-size: 35px;
  font-weight: bold;
  color: #333;
  text-align: start;
  margin-bottom: 2rem;
}

/* 内容区域样式 */
.platform-content {
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
}

.content-paragraph {
  margin-bottom: 1.5rem;
  text-align: left; /* 改为左对齐 */
  text-indent: 2em;
}

/* 服务部分样式 */
.service-section {
  margin-bottom: 2.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #13675b;
  margin-bottom: 1rem;
  text-align: start;
}

/* 流程内容样式 */
.process-content {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #13675b;
}

.process-text {
  line-height: 1.6;
  color: #555;
  margin: 0;
  font-size: 1.05rem;
  text-align: left; /* 改为左对齐 */
}

/* 类型内容样式 */
.type-content {
  padding: 0 1rem;
}

.type-text {
  line-height: 1.6;
  color: #555;
  margin: 0;
  font-size: 1.05rem;
  text-align: left; /* 改为左对齐 */
}

/* 联系方式样式 */
.contact-content {
  padding: 0 1rem;
}

.contact-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left; /* 改为左对齐 */
}

.contact-text:last-child {
  margin-bottom: 0;
}

/* 地址内容样式 */
.address-content {
  padding: 0 1rem;
}

.address-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left; /* 改为左对齐 */
}

.address-text:last-child {
  margin-bottom: 0;
}

/* 汇款方式样式 */
.payment-content {
  padding: 0 1rem;
}

.payment-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left; /* 改为左对齐 */
}

.payment-note {
  background-color: #fff3cd;
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid #ffc107;
  margin-top: 1rem;
  font-style: italic;
  text-align: left; /* 改为左对齐 */
}

/* 注意事项样式 */
.notes-content {
  padding: 0 1rem;
}

.notes-list {
  list-style-type: decimal;
  padding-left: 1.5rem;
  color: #555;
}

.note-item {
  line-height: 1.7;
  margin-bottom: 1rem;
  text-align: left; /* 改为左对齐 */
  font-size: 1.05rem;
}

.note-item:last-child {
  margin-bottom: 0;
}

/* 分隔线样式 */
.custom-double-divider {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.title-divider {
  position: relative;
  border: none;
  margin: 0;
  height: 1px;
}

/* 左侧 20% 的分隔线（绿色） */
.title-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: 4px;
  background: #13675b;
}

/* 右侧 80% 的分隔线（灰色） */
.title-divider::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  height: 1px;
  background: #e5e7eb;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .custom-card {
    padding: 1.5rem;
  }

  .contact-title {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .content-paragraph,
  .process-text,
  .type-text,
  .contact-text,
  .address-text,
  .payment-text,
  .note-item {
    font-size: 1rem;
    text-indent: 1.5em;
  }

  .process-content {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .contact-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.2rem;
  }

  .content-paragraph,
  .process-text,
  .type-text,
  .contact-text,
  .address-text,
  .payment-text,
  .note-item {
    font-size: 0.9rem;
    text-indent: 1em;
  }

  .notes-list {
    padding-left: 1rem;
  }
}
</style>